<template>
  <div class="code-layout">
    <div v-html="readmeHtml" class="markdown-body" v-if="readmeHtml"></div>
  </div>
</template>
<script>
//  实训概览

import marked from "marked";


// require('mathjax').init({
//   loader: {load: ['input/tex', 'output/svg']}
// }).then((MathJax) => {
//   const svg = MathJax.tex2svg('\\frac{1}{x^2-1}', {display: true});
//   console.log(MathJax.startup.adaptor.outerHTML(svg));
// }).catch((err) => console.log(err.message));

export default {
  data() {
    return {
      readmeHtml: "",
      content: ''
    };
  },
  props: ['value'],
  components: {  },
  methods: {
    
  },

  watch: {
    
  },
  created() {
  },
  mounted() {
    this.readmeHtml = marked(this.value)
    
    let isMathjaxConfig = false; // 防止重复调用Config，造成性能损耗

    const initMathjaxConfig = () => {
      if (!window.MathJax) {
        return;
      }
      window.MathJax.Hub.Config({
        showProcessingMessages: false, //关闭js加载过程信息
        messageStyle: "none", //不显示信息
        jax: ["input/TeX", "output/HTML-CSS"],
        tex2jax: {
          inlineMath: [
            ["$", "$"],
            ["\\(", "\\)"],
          ], //行内公式选择符
          displayMath: [
            ["$$", "$$"],
            ["\\[", "\\]"],
          ], //段内公式选择符
          skipTags: [
            "script",
            "noscript",
            "style",
            "textarea",
            "pre",
            "code",
            "a",
          ], //避开某些标签
        },
        "HTML-CSS": {
          availableFonts: ["STIX", "TeX"], //可选字体
          showMathMenu: false, //关闭右击菜单显示
        },
      });
      isMathjaxConfig = true; //
    };
    if (isMathjaxConfig === false) {
      // 如果：没有配置MathJax
      initMathjaxConfig();
    }

    // 如果，不传入第三个参数，则渲染整个document
    // 因为使用的Vuejs，所以指明#app，以提高速度
    setTimeout(() => {
      window.MathJax && window.MathJax.Hub.Queue([
        "Typeset",
        window.MathJax.Hub,
        document.getElementById("app"),
      ]);
    }, 500);
  },
  destroyed() {},
};
</script>

<style lang="less" scoped>
.code-layout {
  padding: 40px 20px;
}

.data-box {
  background-color: #fff;
  min-height: 839px;
  margin-top: 20px;
  margin-bottom: 30px;
}
.centerspan {
  width: 208px;
  height: 22px;
  text-align: center;
  margin-top: 207px;
  margin-left: 480px;
  display: block;
  background-color: #fff;
  a{
    color: @blue;
  }
}
</style>
